<template>
  <div class="app-container">
    <el-form :model="grade" ref="queryForm" :inline="true">
      <el-form-item label="班级名称" prop="name">
        <el-input
          v-model="grade.name"
          placeholder="请输入班级名称"
          clearable
          size="small"
          style="width: 240px"
        />
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-select
          v-model="grade.status"
          placeholder="班级状态"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="班级专业">
        <el-select
          v-model="grade.profession"
          placeholder="班级专业"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="dict in pro"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getOverList"  >搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini"  >重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="dialogVisible=true"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="sList.length===0?true:false"
          @click="qiYong"
        >启用</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          @click="jinYong"
          :disabled="sList.length===0?true:false"
        >停用</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          :disabled="sList.length===0?true:false"
        >设置毕业</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          :disabled="sList.length===0?true:false"
        >设置任课老师</el-button>
      </el-col><el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          :disabled="sList.length===0?true:false"
        >导入班级信息</el-button>
      </el-col>
    </el-row>

      <el-table  :data="gradeList"
                 @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
      <el-table-column label="序号" prop="id"   />
      <el-table-column label="班级名称" prop="name"   />
      <el-table-column label="班主任" prop="username"   />
      <el-table-column label="班级人数" prop="ren"  />
      <el-table-column label="班级年级" prop="grade"  />
      <el-table-column label="班级专业" prop="grade"   />
      <el-table-column label="创建时间" prop="ctime"   />
        <el-table-column label="是否毕业" prop="graduation" ><template slot-scope="scope">{{scope.row.graduation==1?'已毕业':'未毕业'}}</template></el-table-column>
      <el-table-column label="状态" prop="status"   />
        <el-table-column label="操作"  >
          <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click="ins(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row.id)"></el-button>
          <el-button @click="student(scope.row.id)">学生列表</el-button>
          <el-button @click="pei">配置老师</el-button>
          </template>
        </el-table-column>

    </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="grade.pageNum"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="grade.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

    <el-dialog
      :visible.sync="dialogVisible"
      title="添加班级信息"
      width="30%">


      <el-form :model="ruleForm" :rules="rules" ref="formName"  label-width="100px" class="demo-ruleForm">
        <el-form-item label="班级名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="班级专业">
          <el-select
            v-model="ruleForm.profession"
            placeholder="班级专业"
            clearable
            size="small"
            style="width: 240px"
          >
            <el-option
              v-for="dict in pro"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="班级年级" prop="year">
          <el-select
            v-model="ruleForm.year"
            placeholder="班级年级"
            clearable
            size="small"
            style="width: 240px"
          >
            <el-option
              v-for="dict in years"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="班主任" prop="ren">
          <el-select
            v-model="ruleForm.ren"
            placeholder="班主任"
            clearable
            size="small"
            style="width: 240px"
          >
            <el-option
              v-for="dict in user"
              :key="dict.id"
              :label="dict.username"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="助理班主任">
          <el-select
            v-model="ruleForm.zhu"
            placeholder="班主任"
            clearable
            size="small"
            style="width: 240px"
          >
            <el-option
              v-for="dict in user"
              :key="dict.id"
              :label="dict.username"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="学期">
          <el-select
            v-model="ruleForm.stu"
            placeholder="学期"
            clearable
            size="small"
            style="width: 240px"
          >
            <el-option
              v-for="dict in stu"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
        <el-radio v-model="ruleForm.radio" label="0">有效</el-radio>
        <el-radio v-model="ruleForm.radio" label="1">无效</el-radio>
        </el-form-item>
      </el-form>

    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addForms('formName')">确 定</el-button>
    </el-dialog>
    <el-dialog
      :visible.sync="insdialogVisible"
      title="修改班级信息"
      width="30%">


      <el-form :model="ruleForm2" :rules="rules" ref="formName"  label-width="100px" class="demo-ruleForm">
        <el-form-item label="班级名称" prop="name">
          <el-input v-model="ruleForm2.name"></el-input>
        </el-form-item>
        <el-form-item label="班级专业">
          <el-select
            v-model="ruleForm2.profession"
            placeholder="班级专业"
            clearable
            size="small"
            style="width: 240px"
          >
            <el-option
              v-for="dict in pro"
              :label="dict.dictLabel"
              :value="dict.dictLabel"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="班级年级" prop="year">
          <el-select
            v-model="ruleForm2.year"
            placeholder="班级年级"
            clearable
            size="small"
            style="width: 240px"
          >
            <el-option
              v-for="dict in years"
              :label="dict.dictLabel"
              :value="dict.dictLabel"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="班主任" prop="ren">
          <el-select
            v-model="ruleForm2.ren"
            placeholder="班主任"
            clearable
            size="small"
            style="width: 240px"
          >
            <el-option
              v-for="dict in user"
              :key="dict.id"
              :label="dict.username"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="助理班主任">
          <el-select
            v-model="ruleForm2.zhu"
            placeholder="班主任"
            clearable
            size="small"
            style="width: 240px"
          >
            <el-option
              v-for="dict in user"
              :key="dict.id"
              :label="dict.username"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="学期">
          <el-select
            v-model="ruleForm2.stu"
            placeholder="学期"
            clearable
            size="small"
            style="width: 240px"
          >
            <el-option
              v-for="dict in stu"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio v-model="ruleForm2.radio" label="0">有效</el-radio>
          <el-radio v-model="ruleForm2.radio" label="1">无效</el-radio>
        </el-form-item>
      </el-form>

      <el-button @click="insdialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="upForms('formName')">确 定</el-button>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="studialogVisible"
      width="80%"
       >
        <el-table
          :data="stuData"
          style="width: 100%">
          <el-table-column label="学号" prop="sid"   />
          <el-table-column label="姓名" prop="name"   />
          <el-table-column label="状态" prop="status"   />
          <el-table-column label="手机号" prop="phone"   />
          <el-table-column label="性别" prop="gender"  ><template slot-scope="scope">{{ scope.row.gender===1?'男':'女' }}</template></el-table-column>
          <el-table-column label="入学年月" prop="date"   />
          <el-table-column label="班级" prop="ban"   />
        </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
          :current-page="pageNum2"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="pageSize2"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total2">
        </el-pagination>
      </div>
    <el-button @click="studialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="studialogVisible = false">确 定</el-button>
    </el-dialog>
    <el-dialog
      title="教员配置"
      :visible.sync="thdialogVisible"
      width="70%"
      >

    <el-button @click="thdialogVisible = false">确定</el-button>
    <el-button type="primary" @click="dialogVisible = false">开始编辑</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { listRole, getRole, delRole, addRole, updateRole, exportRole, dataScope, changeRoleStatus } from "@/api/system/role";
import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";
import { treeselect as deptTreeselect, roleDeptTreeselect } from "@/api/system/dept";
import {add, del, dela, getInfo, getList, getStu, getXia, jinDong, qiDong, update} from "@/api/banji";
import {getClassTeacherList} from "@/api/system/user";
export default {
  data() {
    return{
      grade:{
        name:null,
        status:null,
        profession:null,
        pageNum:1,
        pageSize:5
      }
      ,thdialogVisible:false
      ,dialogVisible:false,
      studialogVisible:false
      ,insdialogVisible:false
      ,pro:[]
      ,statusOptions:[],
      gradeList:[],
      total:0,
      total2:0,
      pageNum2:1,
      pageSize2:5,
      only:0,
      years:[],
      user:[],
      stuData:[],
      stu:[],
      ban:'',
      vif:'on',
      ruleForm:{
        name:'',
        profession:'',
        year:'',
        ren:'',
        zhu:'',
        stu:'',
        radio:'0',
        id:''
      },
      sList:[],
      ruleForm2:{
        name:'',
        profession:'',
        year:'',
        ren:'',
        zhu:'',
        stu:'',
        radio:'0',
        id:''

      },
      rules: {
        name: [
          {required: true, message: '班级名称', trigger: 'blur'},
        ],
        year: [
          {required: true, message: '班级年级', trigger: 'blur'},
        ], ren: [
          {required: true, message: '班级年级', trigger: 'blur'},
        ]
      }
    }
  },methods:{
    pei(){
      this.thdialogVisible=true
    },
    qiYong(){
      qiDong(this.sList).then(res=>{
        this.getOverList()
      })
    }
    ,
    jinYong(){
      jinDong(this.sList).then(res=>{
        this.getOverList()
      })
    }
    ,
    getStuList(){
      getStu(this.ban,this.pageSize2,this.pageNum2).then(res=>{
        console.log(res)
        this.stuData=res.data.data;
        this.total2=res.data.total;
      })
    },
    student(id){
      this.ban=id
     this.studialogVisible=true
      this.getStuList()
    },
    addForms(formName){
      this.$refs[formName].validate((valid) =>{
        if (valid) {
          add(this.ruleForm).then(res => {
              alert("添加成功")
              this.dialogVisible=false;
              this.getOverList()
            this.$refs[formName].resetFields();
          })
        }
      })
    },
    //更新
    upForms(formName){
      this.$refs[formName].validate((valid) =>{
        if (valid) {
          update(this.ruleForm2).then(res => {
              this.insdialogVisible=false;
              this.getOverList()
            this.$refs[formName].resetFields();
          })
        }
      })
    },
    //删除班级
    del(id){
      dela(id).then(res=>{
        this.getOverList()
      })
    },
    ins(data){
      console.log(data)
      this.insdialogVisible=true
      this.ruleForm2.name=data.name
      this.ruleForm2.radio=data.status+''
      this.ruleForm2.profession=data.pro
      this.ruleForm2.ren=data.teacherId
      this.ruleForm2.zhu=data.assistantId
      this.ruleForm2.year=data.grade
      this.ruleForm2.stu=data.semester
      this.ruleForm2.id=data.id
    },
    getOverList(){
      getList(this.grade).then(res=>{
        console.log(res)
        this.gradeList=res.data.data;
        this.total=res.data.total;
      })
    }
    ,
    getXIala() {
      getXia("zhuanye").then(res=>{
        this.pro=res.data;
        console.log(res)
      })
    },
    getYear() {
      getXia("year").then(res=>{
        this.years=res.data;
        this.getStu()
        getClassTeacherList().then(res=>{
          this.user=res.data
        })
      })
    },
    handleSelectionChange(num){
      this.sList=num
    },
    handleCurrentChange(num){
      this.grade.pageNum=num
      this.getOverList()
    }, handleCurrentChange2(num){
      this.grade.pageNum2=num
      this.getStuList()
    },
    handleSizeChange(size){
      this.grade.pageSize=size
      this.getOverList()
    }, handleSizeChange2(size){
      this.grade.pageSize2=size
      this.getStuList()
    },
    getStatus() {
      getXia("t_sys_normal_disable").then(res=>{
        this.statusOptions=res.data;
      })
    },
    getStu() {
      getXia("stu").then(res=>{
        this.stu=res.data;
      })
    },
  },
  created(){
    this.getOverList()
    this.getXIala()
    this.getYear()
    this.getStatus()
  }
}

</script>
